<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单验证插件</title>
		<link rel="stylesheet" href="../static/js/jq_plugs/Validform/css/style.css" />
		<style>
			input[type=text],
			input[type=password] {
				border: 1px solid #CCCCCC;
				height: 20px;
			}
			.utype{ color: #CCCCCC;}
			.active{ color: red;}
		</style>
	</head>

	<body>
		<p>
			<a id="J_Player" class="utype active" data-utype="1" href="javascript:;">体验者</a>
			<a id="J_Develeper" class="utype" data-utype="2" href="javascript:;">开发者</a>
		</p>
		<form id="J_Form" action="/test/reg.php?f=subform">
			<input id="J_Utype" type="hidden" name="utype" value="1" />
			<label for="J_Uname">用户名
				<input id="J_Uname" type="text" name="uname" ajaxurl="reg.php?f=check_name" datatype="uname" nullmsg="6-50个字符，1个汉字为2个字符。推荐使用中文用户名。" errormsg="6-50个字符，1个汉字为2个字符。推荐使用中文用户名2。" sucmsg=" " />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Pwd">密码
				<input id="J_Pwd" type="password" name="pwd" datatype="pwd" nullmsg="请输入密码" errormsg="6-20位字符，仅由英文加数字或下划线组合" sucmsg=" " />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Pwd2">确认密码
				<input id="J_Pwd2" type="password" name="pwd2" datatype="*" recheck="pwd" nullmsg="请再输入一次密码！" errormsg="您两次输入的账号密码不一致！" sucmsg=" " />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Email">邮箱
				<input id="J_Email" type="text" name="email" datatype="email" nullmsg="请输入邮箱" errormsg="邮箱格式有误" sucmsg=" " />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Email">手机
				<input id="J_Email" type="text" name="mobile" datatype="m" nullmsg="请输入手机号" errormsg="号码格式有误" sucmsg=" " />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Recommend">推荐人
				<input id="J_Recommend" type="text" name="recommend" />
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<label for="J_Vcode">验证码
				<input id="J_Vcode" type="text" name="vcode" data-url="reg.php?f=check_vcode" ajaxurl="reg.php?f=check_vcode" datatype="vcode" nullmsg="请输入验证码" errormsg="验证码错误" sucmsg=" " />
				<input id="J_VcodeShow" type="text" disabled="disabled" data-url="reg.php?f=vcode" />
				<a id="J_VcodeAgain" href="javascript:;">换一张</a>
				<span class="Validform_checktip"></span>
			</label>
			<br />
			<input id="J_FormSub" type="button" value="提交" />
			<span id="J_SubMsg" class="Validform_checktip"></span>
		</form>
	</body>
	<script src="../static/js/jquery/jquery-1.9.1.min.js"></script>
	<script src="../static/js/jq_plugs/Validform/Validform_v5.3.2_min.js"></script>
	<script>
		
		// 验证对象
		var Validation = {
			// 字节长度转换
			_lengthAt : function(strTemp){
				var i, sum;
				sum = 0;
				for (i = 0; i < strTemp.length; i++) {
					if ((strTemp.charCodeAt(i) >= 0) && (strTemp.charCodeAt(i) <= 255))
						sum = sum + 1;
					else
						sum = sum + 2;
				}
				return sum;
			}
			
		};
		
		// 用户名验证
		Validation.checkName = function(obj, val){
			if (this._lengthAt(val) < 6 || this._lengthAt(val) > 50) {
				obj.attr('errormsg', '6-50个字符，1个汉字为2个字符。推荐使用中文用户名。');
				return false;
			}else if (/\d{5}/.test(val)) {
				obj.attr('errormsg', '用户名中不能包含多个数字，推荐使用中文用户名。');
				return false;
			}else if (!/^[_0-9a-z\u4e00-\u9fa5]+$/i.test(val)) {
				obj.attr('errormsg', '用户名支持中英文、数字、下划线，不支持除下划线的特殊字符。');
				return false;
			}else{
				return true;
			}
		};
		
		// 密码验证
		Validation.checkPwd = function(obj, uname, val){
			if (/^[a-zA-Z]+$/.test(val)) {
				obj.attr('errormsg', '密码不能为纯字母。');
				return false;
			}
			if (/^\d+$/.test(val)) {
				obj.attr('errormsg', '密码不能为纯数字。');
				return false;
			}
			if (/^_+$/.test(val)) {
				obj.attr('errormsg', '密码不能为纯符号。');
				return false;
			}
			if (!/^[_0-9a-z]{6,20}$/i.test(val)) {
				obj.attr('errormsg', '密码为6-20个字符，请使用字母加数字或下划线组合密码。');
				return false;
			}
			if (uname && val.toLowerCase().indexOf(uname.toLowerCase()) !== -1) {
				obj.attr('errormsg', '密码不能含有账号名。');
				return false;
			}
			return true;
		}
		// 邮箱验证
		Validation.checkEmail = function(obj, val){
			if (val.length>100) {
				obj.attr('errormsg', '请输入100字以内的邮箱地址。');
				return false;
			}else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val)) {
				obj.attr('errormsg', '请输入有效的邮箱地址，如：xiaoming@sina.com');
				return false;
			}else{
				return true;
			}
		}
		// 验证码验证
		Validation.checkVcode = function(obj, val){
			if (!/^[0-9a-z]{4,8}$/i.test(val)) {
				return false;
			}
			
			obj.attr('ajaxurl', obj.data('url') + '&true_code=' + $('#J_VcodeShow').val());
			return true;
		}
		
		/*===============================================JQ===================================================*/
		
		;(function(){
			window.Reg = window.Reg || {};
			Reg.step1 = {
				init : function(){
					var step1 = Reg.step1;
					step1.changeUtype();
					step1.createVcode();
					step1.validform();
				},
				changeUtype : function(){// 用户类型切换
					$('#J_Player,#J_Develeper').click(function(){
						var $that = $(this),
							$payler = $('#J_Player'),
							$develeper = $('#J_Develeper'),
							$recommend = $('#J_Recommend').parent(); // 推荐人栏目
						
						if($that.data('utype') == 1){
							$develeper.removeClass('active');
							$payler.addClass('active');
							$recommend.show();
						}else if($that.data('utype') == 2){
							$payler.removeClass('active');
							$develeper.addClass('active');
							$recommend.hide();
						}
					});
				},
				createVcode : function(){// 生成验证码
					var $obj = $('#J_VcodeShow'), 
						$resetObj = $('#J_VcodeAgain');
						
					$resetObj.click(function() {
						$.ajax({
							type: "get",
							url: $obj.data('url') + '&r=' + Math.floor(Math.random() * 10e8),
							async: false,
							dataType: 'json',
							success: function(rs) {
								if (rs.status == 'y') {
									$obj.val(rs.data.vcode);
									return true;
								} else {
									return false;
								}
							}
						});
					});
					$resetObj.click();
				},
				validform : function(){
					var $form = $('#J_Form');
					
					var rule = {
						//参数gets是获取到的表单元素值，obj为当前表单元素，curform为当前验证的表单，regxp为内置的一些正则表达式的引用;
						'uname': function(gets, obj, curform, regxp) {
							return Validation.checkName(obj, gets) ? true : false;
						},
						'pwd': function(gets, obj, curform, regxp) {
							return Validation.checkPwd(obj, $('#J_Uname').val(), gets) ? true : false;
						},
						'email' : function(gets, obj, curform, regxp){
							return Validation.checkEmail(obj, gets) ? true : false;
						},
						'vcode': function(gets, obj, curform, regxp) {
							return Validation.checkVcode(obj, gets) ? true : false;
						}
					};
					
					var tiptype = function(msg, o, cssctl) {
						//msg：提示信息;
						//o:{obj:*,type:*,curform:*}, obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4， 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态, curform为当前form对象;
						//cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和 当前提示的状态（既形参o中的type）;
						if (!o.obj.is("form")) { //验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
							var objtip = o.obj.siblings(".Validform_checktip");
							objtip.attr('class', 'Validform_checktip').text(''); // 清除上次验证的样式及提示信息
		
							switch (o.type) {
								case 1: // 检测中（默认提示：正在检测信息…）
									break;
								case 2:
									//	if(msg.indexOf('通过信息验证') !== -1) msg=''; // 阻止"通过信息验证"
									break;
								case 3:
									// 直接回车（提示：所填信息没有经过验证，请稍候…）
		//							if (msg.indexOf('信息没有经过验证') !== -1) msg = ''; // 阻止输入后直接回车遇到的内置提示
									if (/<\/?(\w+[\s\S]*?)>/gi.test(msg)) msg = '服务器繁忙'; // 阻止务器超时返回错误代码在提示上
									if(o.obj.attr('name') == 'vcode') $('#J_VcodeAgain').click(); // 验证码不合法重置
									break;
							}
		
							cssctl(objtip, o.type);
							objtip.text(msg);
						// 表单提交结果提示
						} else {
							//	var objtip=o.obj.find("#J_SubMsg"); 
							//	cssctl(objtip,o.type);
							//	objtip.text(msg);
						}
					}
					
					/*===初始化验证插件===*/
					var $Validform = $form.Validform({
						btnSubmit: '#J_FormSub', // 提交按钮
						//	tiptype:3,
						datatype: rule,
						postonce: true, // 二次提交防御
						tiptype: function(msg, o, cssctl) {
							tiptype(msg, o, cssctl);
						},
						ajaxPost: true, // 使用ajax方式提交表单数据
						callback: function(data) { // 提交表单的回调
							if (data.status == "y") {
								alert('表单提交成功');
							} else {
								alert('表单提交失败');
							}
						}
					});
					
					// 回车键处理插件验证用户名问题		
					$form.keypress(function(event) {
						if (event.keyCode == 13) {
							$('#J_FormSub').click();
						}
					});
				}
			};
			
			// 初始化所有功能
			Reg.step1.init();
		})();

	</script>

</html>